<template>
  <div>
    <page-header-wrapper />
    <a-card
      :tab-list="tabListNoTitle"
      :active-tab-key="customActiveKey"
      style="margin-top: 10px"
      @tabChange="key => handleTabClick(key, 'noTitleKey')"
    >
      <a-spin :spinning="loading">
        <a-form
          :form="form"
          @submit="handleSubmit"
          :loading="loading"
        >
          <div v-if="customActiveKey === 'tab1'" :tab="$t('menu.site.input.title')">
            <a-card
              style="width:100%"
              :bordered="false"
            >
              <a-form-item
                v-for="(item, index) in formList.siteInfo"
                :key="index"
                :label="item.title"
              >
                <a-input
                  v-if="!item.type || item.type === 'textarea'"
                  :type="item.type ? 'textarea' : 'input'"
                  :rows="12"
                  v-decorator="[
                    index,
                    {rules: [{ required: true, message: item.errMessage }], validateTrigger: 'blur', initialValue: item.value}
                  ]"
                />
                <img
                  v-if="item.type === 'file'"
                  v-decorator="[
                    index,
                    {rules: [{ required: true, message: item.errMessage }], validateTrigger: 'blur', initialValue: item.value}
                  ]"
                  style="width: 120px"
                  :src="`${BASE_URL}/community/tool/get_file/${item.value}`"
                  @click="$refs.modal.edit(1, false)"
                />
                <a-switch
                  v-model="status"
                  v-if="item.type === 'switch'"
                  @change="switchChange"
                >
                  <a-icon slot="checkedChildren" type="check" />
                  <a-icon slot="unCheckedChildren" type="close" />
                </a-switch>
                <a-select
                  v-if="item.type === 'select'"
                  show-search
                  v-decorator="[
                    index,
                    {rules: [{ required: true, message: item.errMessage }], validateTrigger: 'blur', initialValue: item.value}
                  ]"
                  :placeholder="item.placeholder"
                  style="width: 100%"
                  :default-active-first-option="false"
                  :filter-option="false"
                  :not-found-content="null"
                  @search="(value) => {
                    item.action(value, index)
                  }"
                  @change="(e) => {
                    item.change(e, index)
                  }"
                >
                  <a-select-option v-for="(list, i) in item.searchList" :key="i">
                    {{ list.site_theme_name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-card>
          </div>
          <div v-if="customActiveKey === 'tab2'" :tab="$t('menu.site.company.title')">
            <a-card
              style="width:100%"
              :bordered="false"
            >
              <a-form-item
                v-for="(item, index) in formList.companyInfo"
                :key="index"
                :label="item.title"
              >
                <a-input
                  v-decorator="[
                    index,
                    {rules: [{ required: true, message: item.errMessage }], validateTrigger: 'blur', initialValue: item.value}
                  ]"
                />
              </a-form-item>
            </a-card>
          </div>
          <a-form-item style="margin-top:24px">
            <a-button
              size="large"
              type="primary"
              htmlType="submit"
            >{{ $t('submit') }}</a-button>
          </a-form-item>
        </a-form>
      </a-spin>
    </a-card>
    <avatar-modal ref="modal" @ok="setFile"/>
  </div>
</template>

<script>
import {
  getCompanyInfo,
  setCompanyInfo,
  getSiteInfo,
  setSiteInfo
} from '@/api/info'

import {
  getThemeList
} from '@/api/theme'

import AvatarModal from '../account/settings/AvatarModal'
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'

import store from '@/store'

export default {
  components: {
    AvatarModal,
    PageHeaderWrapper
  },
  data () {
    return {
      BASE_URL: process.env.VUE_APP_API_BASE_URL,
      customActiveKey: 'tab1',
      loading: true,
      form: this.$form.createForm(this),
      formList: {
        siteInfo: {
          siteTitle: {
            title: '站点标题',
            errMessage: '站点标题不能为空'
          },
          siteSubtitle: {
            title: '站点副标题',
            errMessage: '站点副标题不能为空'
          },
          siteDomain: {
            title: '站点域名',
            errMessage: '站点域名不能为空'
          },
          siteTheme: {
            title: '站点主题',
            errMessage: '站点主题不能为空',
            type: 'select',
            // 搜索方法
            action: this.searchTheme,
            change: this.changeTheme,
            searchList: [],
            placeholder: '请输入站点主题名称',
            value: ''
          },
          siteLogo: {
            title: '站点logo',
            errMessage: '站点logo不能为空',
            type: 'file'
          },
          siteKeywords: {
            title: '站点关键字',
            errMessage: '站点关键字不能为空'
          },
          siteDescription: {
            title: '站点描述',
            errMessage: '站点描述不能为空'
          },
          siteIcp: {
            title: '站点备案信息',
            errMessage: '站点备案信息不能为空'
          },
          siteCopyright: {
            title: '站点版权',
            errMessage: '站点版权不能为空'
          },
          status: {
            title: '网站状态',
            errMessage: '网站状态不能为空',
            type: 'switch'
          },
          siteStatistical: {
            title: '站点统计',
            errMessage: '站点统计不能为空',
            type: 'textarea'
          }
        },
        companyInfo: {
          companyName: {
            title: '企业名称',
            errMessage: '企业名称不能为空'
          },
          companyAddress: {
            title: '企业地址',
            errMessage: '企业地址不能为空'
          },
          companyPostcode: {
            title: '企业邮编',
            errMessage: '企业邮编不能为空'
          },
          companyContact: {
            title: '企业联系人',
            errMessage: '企业联系人不能为空'
          },
          companyPhone: {
            title: '企业联系电话',
            errMessage: '企业联系电话不能为空'
          },
          companyMobile: {
            title: '企业手机号',
            errMessage: '企业手机号不能为空'
          },
          companyFax: {
            title: '企业传真',
            errMessage: '企业传真不能为空'
          },
          companyQQ: {
            title: '企业QQ',
            errMessage: '企业QQ不能为空'
          },
          companyWeChat: {
            title: '企业微信',
            errMessage: '企业微信不能为空'
          },
          companyLicense: {
            title: '企业营业执照号',
            errMessage: '企业营业执照号不能为空'
          },
          companyOther: {
            title: '企业其他信息',
            errMessage: '企业其他信息不能为空'
          }
        }
      },
      tabListNoTitle: [
        {
          key: 'tab1',
          tab: '站点设置'
        },
        {
          key: 'tab2',
          tab: '企业信息管理'
        }
      ],
      status: false
    }
  },
  created () {
    getSiteInfo().then(res => {
      if (res.items.status !== undefined) {
        this.status = parseInt(res.items.status) === 1
      }
      this.setDefaultValue('siteInfo', res.items)
      this.customActiveKey = 'tab0'
      this.customActiveKey = 'tab1'
    })
    getCompanyInfo().then(res => {
      this.setDefaultValue('companyInfo', res.items)
      this.loading = false
    })
  },
  methods: {
    handleTabClick (key) {
      this.customActiveKey = key
    },
    setFile (src) {
      this.formList.siteInfo.siteLogo.value = src
      this.customActiveKey = '0'
      this.customActiveKey = 'tab1'
      this.form.setFields({
        siteLogo: this.formList.siteInfo.siteLogo
      })
    },
    switchChange (check) {
      this.formList.siteInfo.status.value = check ? 1 : 0
    },
    // 提交更新
    handleSubmit (e) {
      e.preventDefault()
      const {
        form: { validateFields }
      } = this
      const field = this.customActiveKey === 'tab1' ? 'siteInfo' : 'companyInfo'
      validateFields(Object.keys(this.formList[field]), { force: true }, (err, values) => {
        if (!err) {
          const Params = { ...values }
          if (field === 'siteInfo') {
            Params.status = this.formList.siteInfo.status.value
            Params.site_theme_id = this.formList.siteInfo.siteTheme.value
            setSiteInfo({
              siteInfo: Params
            }).then(res => {
              store.dispatch('setWebConfig', res.items)
              this.setDefaultValue('siteInfo', res.items)
              this.$message.success(res.msg)
            })
          } else {
            setCompanyInfo({
              companyInfo: Params
            }).then(res => {
              this.setDefaultValue('companyInfo', res.items)
              this.$message.success(res.msg)
            })
          }
        }
      })
    },
    setDefaultValue (key, arr) {
      if (arr.length === 0) return
      for (const keys in this.formList[key]) {
        this.formList[key][keys].value = arr[keys.toLowerCase()] ? arr[keys.toLowerCase()] : this.formList.siteInfo[keys].value
      }
      this.form.resetFields()
    },
    searchTheme (value, key) {
      const field = this.customActiveKey === 'tab1' ? 'siteInfo' : 'companyInfo'
      getThemeList({
        name: value
      }).then(res => {
        this.formList[field][key].searchList = res.items
      })
    },
    changeTheme (value, key) {
      const field = this.customActiveKey === 'tab1' ? 'siteInfo' : 'companyInfo'
      this.formList[field][key].value = this.formList[field][key].searchList[value].site_theme_id
      this.form.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.avatar-upload-wrapper {
  height: 200px;
  width: 100%;
}

.ant-upload-preview {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 180px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;

  .upload-icon {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 1.4rem;
    padding: 0.5rem;
    background: rgba(222, 221, 221, 0.7);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  .mask {
    opacity: 0;
    position: absolute;
    background: rgba(0,0,0,0.4);
    cursor: pointer;
    transition: opacity 0.4s;

    &:hover {
      opacity: 1;
    }

    i {
      font-size: 2rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -1rem;
      margin-top: -1rem;
      color: #d6d6d6;
    }
  }

  img, .mask {
    width: 100%;
    max-width: 180px;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
  }
}
</style>
